var util = {
    to2Array: function (arr, len1, len2){  // len1 * len2 的2维数组
        var temp = [];
        for (var i = 0; i < len1; i++){
            temp.push([]);   // 构造完整二维数组
        }

        for (var i = 0, row = 0, col = 0; i < arr.length; i++){  // temp[][]
            temp[row][col] = arr[i];
            col++
            if (col == 20){
                col = 0;
                row++;
            }
        }
        return temp;
    },
    randomInt: function (from, to){
        return parseInt(Math.random() * (to - from + 1) + from);
    }
}

var game = {
    init: function (){// 对整个游戏的初始化
        this.div = document.querySelector("#area");
        this.snakeBody = []; // 存储蛇的身体的坐
        this.moveDirection = "right";
        this.drawArea();
        this.initSnakeBody();
        this.drawSnakeBody();
        document.onkeydown = function (e){
            switch (e.keyCode){
                case 37:  // 向左
                case 65:
                    if (this.moveDirection == "right") return;
                    this.moveDirection = "left";
                    break;
                case 38:
                    if (this.moveDirection == "down") return;
                    this.moveDirection = "up";
                    break;
                case 39:
                    if (this.moveDirection == "left") return;
                    this.moveDirection = "right";
                    break;
                case 40:
                    if (this.moveDirection == "up") return;
                    this.moveDirection = "down";
                    break;

            }
        }.bind(this)
    },
    drawArea: function (){ //绘制蛇活动的区域
        for (var i = 0; i < 400; i++){
            var div = document.createElement("div");
            this.div.appendChild(div);
        }
        // 存储所有的小方块的二维数组
        this.allArea = util.to2Array(this.div.children, 20, 20);

    },
    initSnakeBody: function (){  //初始化蛇的身体
        var index1 = util.randomInt(0, 19);
        var index2 = util.randomInt(2, 16);
        this.snakeBody.push([index1, index2])
        this.snakeBody.push([index1, index2 - 1])
        this.snakeBody.push([index1, index2 - 2])

        // 投放食物
        this.putFood();
    },
    drawSnakeBody: function (){  // 绘制蛇的身体
        for (var i = 0; i < this.snakeBody.length; i++){
            var i1 = this.snakeBody[i][0];
            var i2 = this.snakeBody[i][1];
            this.allArea[i1][i2].style.backgroundColor = "pink";
        }
    },
    start: function (){ // 开始游戏
        this.move();
    },
    move: function (){
        var that = this;
        var body = this.snakeBody;
        setTimeout(function step(){
            // 向右跑的新的蛇头的坐标
            var firstPart;
            switch (that.moveDirection){
                case "right":
                    firstPart = [body[0][0], body[0][1] + 1];
                    break;
                case "up":
                    firstPart = [body[0][0] - 1, body[0][1]];
                    break;
                case "down":
                    firstPart = [body[0][0] + 1, body[0][1]];
                    break;
                case "left":
                    firstPart = [body[0][0], body[0][1] - 1]
                    break;

            }
            if (that.isGameOver(firstPart)){
                alert("游戏结束");
                return;
            }
            body.unshift(firstPart);
            var poped = body.pop();
            that.allArea[poped[0]][poped[1]].style.backgroundColor = ""
            that.drawSnakeBody();
            that.eatFood();
            setTimeout(step, 2000 / that.snakeBody.length)
        }, 500)
    },
    // 判断游戏是否结束
    isGameOver: function (firstPart){
        // 蛇头的下一步位置决定了之后判断是否撞到了墙
        if (firstPart[0] < 0 || firstPart[0] > 19 || firstPart[1] < 0 || firstPart[1] > 19){
            return true;
        }

        return false;

    },
    putFood: function (){
        var body = this.snakeBody;
        //生成一个坐标, 让这个坐标的颜色改一改, 就表示食物
        this.food = [];
        while (true){
            var index1 = util.randomInt(0, 19);
            var index2 = util.randomInt(0, 19);
            var flag = true;  // 可以在这个位置投放食物
            for (var i = 0; i < body.length; i++){
                if (index1 == body[i][0] && index2 == body[i][1]){
                    flag = false;
                    break;
                }
            }
            if (flag){
                this.food.push(index1);
                this.food.push(index2)
                break;
            }

        }
        //绘制食物
        this.allArea[this.food[0]][this.food[1]].style.backgroundColor = "green";
    },
    eatFood: function (){
        //如果食物的坐标和蛇头的坐标一致, 那么就可以吃了. 把食物的左边,添加到蛇的身体里面去
        var food = this.food;
        var snakeHead = this.snakeBody[0];
        if(food[0] == snakeHead[0] && food[1] == snakeHead[1]){
            this.snakeBody.push(food);
            this.putFood();
        }
    }
}
game.init();
game.start()
